import React, { memo } from "react";


export const wrapEvent = (Component, { renderProps, onChange }: any = {}) => {
  // const Component = memo(Comp)
  return memo(({ children, label, value, field, readonly, ...props }) => {
    let __val = value
    try {
      __val = eval(`renderProps?.${field}`)
    } catch (e) {
      console.error(`“${field}” 在 renderProps 上找不到，无法获取！\r\n`, e)
    }
    const __onChange = (event) => {
      onChange && onChange(event.target.value, field)
    }

    return (
      <Component
        field={field}
        label={label}
        value={__val}
        readonly={readonly}
        onChange={__onChange}
        { ...props }
      >
        { children }
      </Component>
    )
  })
}

export const wrapStyleEvent = (Comp, { renderProps, onChange }: any = {}) => {
  const Component = memo(Comp)
  return memo(({ margin, padding, border, ...props }) => {
    return (
      <Component
        style={renderProps.style}
        margin={margin}
        padding={padding}
        border={border}
        onChange={onChange}
        { ...props }
      />
    )
  })
}

export const wrapPositionEvent = (Comp, { renderProps, onChange }: any = {}) => {
  const Component = memo(Comp)
  return memo(({ margin, padding, border, defaultValue, ...props }) => {
    return (
      <Component
        defaultValue={renderProps.style?.position || defaultValue}
        style={renderProps.style}
        margin={margin}
        padding={padding}
        border={border}
        onChange={onChange}
        { ...props }
      />
    )
  })
}